<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Event Register Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements"/>
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        } </script>
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="/static/index/css/style.css" type="text/css" media="all"/> <!-- Style-CSS -->
    <link rel="stylesheet" href="/static/index/css/font-awesome.css"> <!-- Font-Awesome-Icons-CSS -->
    <!-- //css files -->
    <!-- js -->
    <script type="text/javascript" src="/static/index/js/jquery-2.1.4.min.js"></script>
    <!-- //js -->
</head>
<body>
<!-- main -->
<div data-vide-bg="bg">
    <div class="center-container">
        <div class="w3ls-header">
            <div class="header-main">
                <h1>REGISTER</h1>
                <div class="header-bottom">
                    <div class="header-right w3agile">
                        <div class="header-left-bottom agileinfo">
                            <form action="{:url('index/login/registerdo')}" method="post" name="regForm">
                                <div class="icon1" id="icon1">
                                    <i class="fa fa-user" aria-hidden="true"></i>
                                    <input type="text" placeholder="Enter your name" name="username" />
                                </div>
                                <div class="icon1" id="icon2">
                                    <i class="fa fa-phone" aria-hidden="true" style="border: none; padding: 0;margin: 0;"></i>
                                    <input type="tel" placeholder="Phone number" name="tel"/>
                                </div>
                                <div class="icon1">
                                    <i class="fa fa-twitter" aria-hidden="true" style="border: none; padding: 0;margin: 0;"></i>
                                    <input type="email" placeholder="QQE-mail" name="email" id="emial" required/>
                                </div>
                                <div class="bottom">
                                    <input type="submit" value="Register" id="submit"/>
                                </div>
                                <div class="header-left-top">
                                    <div class="sign-up"><h2>or</h2></div>

                                </div>
                                <div class="header-social wthree">
                                    <ul>
                                        <li><a href="{:url('index/login/email')}" class="f"><i class="fa fa-envelope-o" aria-hidden="true"></i>E-mail</a>
                                        </li>
                                        <li><a href="{:url('index/login/login')}" class="t"><i class="fa fa-phone" aria-hidden="true"></i>PHONE</a></li>
                                        <li><a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101453836&redirect_uri=http://www.qiuzihao.top/index/Login/qqLogin" class="g"><i class="fa" aria-hidden="true"><img src="/static/index/images/Connect_logo_1.png" class="qq"></i>QQ登录</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                        <div class="alert" style="display:none">
                            <div class="alert_con">
                                <p id="ts"></p>
                                <p style="text-align: center"><a class="btn">确定</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--header end here-->
        <!-- copyright start here -->
        <div class="copyright">
            <p>
                If we can only encounter each other rather than stay with each other,then I wish we had never
                encountered.
            </p>
            <p>
                如果只是遇见，不能停留，不如不遇见。
            </p>
        </div>
        <!--copyright end here-->
    </div>
</div>
<script>
    $(function(){
        var ok1 = false;
        var ok2 = false;
        var ok3 = false;
        $(".btn").click(function () {
            $('.alert').hide();
        });
        //用户名正则，2到8位（字母，数字，下划线，减号）
        $("input[name='username']").blur(function () {
            var username = document.regForm.username.value;
            if (username.match(/^[a-zA-Z0-9_-]{2,8}$/) == null) {
                $(".alert").animate({"top": "-40%"}, 300);
                $(".alert").show().animate({"top": "45%"}, 300);
                $("#ts").html("用户名格式不正确~");
                return false;
            } else {
                ok1 = true;
            }
        });

        $("input[name='tel']").blur(function () {
            var tel = document.regForm.tel.value;
            if (tel.match(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/) == null) {
                $(".alert").animate({"top": "-40%"}, 300);
                $(".alert").show().animate({"top": "45%"}, 300);
                $("#ts").html("手机号码格式不正确~");
                return false;
            } else {
                ok2 = true;
            }
        });

        $("input[name='email']").blur(function () {
            var email = document.regForm.email.value;
            if (email.match(/^[1-9]\d{4,10}@qq\.com$/) == null) {
                $(".alert").animate({"top": "-40%"}, 300);
                $(".alert").show().animate({"top": "45%"}, 300);
                $("#ts").html("邮箱格式不正确~");
                return false;
            } else {
                ok3 = true;
            }
        });

        $('#submit').click(function(){
            if(ok1 && ok2 && ok3){
                $('form').submit();
            }else{
                return false;
            }
        });
    });



</script>
</body>
</html>